<template>
  <el-table
    :data="tableData"
    stripe
    style="width: 100%; color: #fff"
    :header-cell-style="{ background: '#282c34' }"
    :cell-style="cellStyle"
    row-key="index"
  >
    <el-table-column type="index" label="序号" width="60" />
    <el-table-column prop="code" label="代码" />
    <el-table-column prop="name" label="名称" />
    <el-table-column prop="change_rate" label="涨幅" sortable>
      <template #default="{ row }">
        <span>{{ takeDecimal(row.change_rate) + "%" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="last_price" label="现价" sortable />
    <el-table-column prop="turnover" label="成交金额（元）" sortable
      ><template #default="{ row }">
        <span>{{ changeMoney(row.turnover) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="total_market_val" label="总市值（元）" sortable
      ><template #default="{ row }">
        <span>{{ changeMoney(row.total_market_val) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="circular_market_val" label="流通市值（元）" sortable
      ><template #default="{ row }">
        <span>{{ changeMoney(row.circular_market_val) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="turnover_rate" label="换手率" sortable
      ><template #default="{ row }">
        <span>{{ takeDecimal(row.turnover_rate) + "%" }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="pb_ratio" label="市盈率" sortable
      ><template #default="{ row }">
        <span>{{ takeDecimal(row.pb_ratio) + "%" }}</span>
      </template>
    </el-table-column>
    <el-table-column label="周期选择" width="120">
      <template #default="scope">
        <el-select
          v-model="scope.row.period"
          placeholder="周期选择"
          size="small"
        >
          <el-option
            v-for="item in times"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="pb_ratio" label="缠论" width="120">
      <template #default="scope">
        <el-select v-model="scope.row.cl" placeholder="缠论" size="small">
          <el-option
            v-for="item in strages"
            :key="item.value"
            :label="`${item.type}-${item.name}`"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column prop="pb_ratio" label="海底捞月" width="120">
      <template #default="scope">
        <el-select v-model="scope.row.sea" placeholder="海底捞月" size="small">
          <el-option
            v-for="item in stragesSea"
            :key="item.value"
            :label="`${item.name}`"
            :value="item.value"
          />
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-space wrap @click.stop="">
          <el-button
            size="small"
            type="primary"
            v-if="!scope.row?.gold_flag"
            @click="handleClick(scope, 'add', 'gold')"
            >加入金池</el-button
          >
          <el-button
            size="small"
            v-else
            @click="handleClick(scope, 'del', 'gold')"
            >取消</el-button
          >
          <el-button
            size="small"
            type="primary"
            v-if="!scope.row?.warn_flag"
            @click="handleClick(scope, 'add', 'warn')"
            >加入预警</el-button
          >
          <el-button
            size="small"
            v-else
            @click="handleClick(scope, 'del', 'warn')"
            >取消预警</el-button
          >
        </el-space>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
import { takeDecimal, changeMoney } from "@/utils/base.js";
import { ElMessage } from "element-plus";
import { defaultApi } from "@/servers";
import { Percentage } from "@/utils/base.js";
import {
  defineProps,
  defineEmits,
  toRefs,
  watch,
  ref,
  reactive,
  onMounted,
  computed,
} from "vue";
import { useStore } from "vuex";
const store = useStore();
const tableData = ref([]);
const type = computed(() => store.getters.system.type);
const market = computed(() => {
  return store.getters.system.market;
});
const times = computed(() => store.getters.system.times);
const strages = computed(() => store.getters.system.strages);
const stragesSea = computed(() => store.getters.system.stragesSea);
// 关注
function handleClick(scope, opt, type) {
  const { row } = scope;
  const { code, name, period, cl, sea } = row;
  let obj = {};
  // 告警
  if (type == "warn") obj = { period, cl, sea };
  // 关注
  defaultApi
    .opt({
      market: market.value,
      code,
      name,
      opt,
      type,
      ...obj,
    })
    .then((data) => {
      ElMessage({
        message: "操作成功",
        type: "success",
      });

      if (type == "gold") scope.row.gold_flag = !scope.row.gold_flag;
      if (type == "warn") scope.row.warn_flag = !scope.row.warn_flag;
    });
}
// 自选操作列表
function getStocks() {
  defaultApi
    .stocks({
      market: market.value,
      type: "warn",
    })
    .then((data) => {
      // 展示表
      tableData.value = data;
    });
}

onMounted(() => {
  getStocks();
});
// 表格行样式
function cellStyle({ row, rowIndex }) {
  if (rowIndex % 2) {
    return { background: "#282c34" };
  } else {
    return { background: "#282c34eb" };
  }
}
</script>

<style lang="scss" scoped>
</style>